<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-10-08 11:44:15
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-10-12 10:13:44
 * @FilePath: \app\src\views\el\css\declareColor\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="declare-color" :style="{ ...declareBgColor }">
    <el-input v-model="color" placeholder="输入颜色值"></el-input>
    <!-- <ElSelectColor></ElSelectColor> -->

    <div class="menu">
      <div class="item ">
        <div class="item-body">1</div>
      </div>
      <div class="item active">
        <div class="item-body">2</div>
      </div>
      <div class="item active">
        <div class="item-body">3</div>
      </div>
      <div class="item">
        <div class="item-body">4</div>
      </div>
      <div class="item">
        <div class="item-body">5</div>
      </div>
      <div class="item active">
        <div class="item-body">6</div>
      </div>
    </div>
  </div>
</template>

<script>
// import ElSelectColor from "./ElSelectColor"
export default {
  // components:{ElSelectColor},
  data() {
    return {
      color: "#fffccc",
      isDisabled: true,
    };
  },
  computed: {
    declareBgColor() {
      return {
        "--bgColor": this.color,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.declare-color {
  height: 100%;
  background-color: var(--bgColor);
  
}

.menu {
  display: flex;
  margin: 10px;
  overflow: hidden;
  border-radius: 10px;
  .item {
    height: 100px;
    flex: 1;
    background-color: aliceblue;
    text-align: center;
    transform: skewX(-20deg);
    border-radius: 5px;
    position: relative;
    &.active {
      background-color: aquamarine;
    }
    .item-body {
      transform: skewX(20deg);
      height: 100%;
      line-height: 100px;
    }
    &:first-child::before {
      top: 0;
      left: 0;
      position: absolute;
      content: "";
      display: block;
      width: 40px;
      height: 100px;
      background-color: inherit;
      transform: skewX(20deg);
    }
    &:last-child::after {
      position: absolute;
      right: 0;
      top: 0;
      content: "";
      display: block;
      width: 40px;
      height: 100px;
      background-color: inherit;
      transform: skewX(20deg);
    }
  }
}
</style>